<!-- 异常监测 -->
<template>
  <div class="contain">
    <div class="contain-box">
      <div class="top-title">服务器资源监测</div>
      <div class="top-box">
        <div class="chart-view">
          <el-progress class="chart-view" type="circle" :percentage="25" :stroke-width="15" stroke-linecap="butt" />
          <div class="title">CPU当前利用率</div>
        </div>
        <div class="chart-view">
          <el-progress class="chart-view" type="circle" :percentage="25" :stroke-width="15" stroke-linecap="butt" />
          <div class="title">内存当前利用率</div>
        </div>
        <div class="chart-view">
          <el-progress class="chart-view" type="circle" :percentage="25" :stroke-width="15" stroke-linecap="butt" />
          <div class="title">云盘当前利用率</div>
        </div>
        <div class="chart-view">
          <el-progress class="chart-view" type="circle" :percentage="25" :stroke-width="15" stroke-linecap="butt" />
          <div class="title">网络带宽利用率</div>
        </div>
      </div>
    </div>
    <div class="contain-box bottom mt20">
      <div class="top-title">平台运行资源监测</div>
      <div class="bottom-box">
        <div class="title">
          JVM初始总内存
        </div>
        <div class="content">
          <el-progress class="" :percentage="60" :stroke-width="25" :text-inside="true" :format="format"></el-progress>
          <div class="all">总内存: 1024G</div>
        </div>
        <div class="title">
          总的物理内存
        </div>
        <div class="content">
          <el-progress class="" :percentage="60" :stroke-width="25" :text-inside="true" :format="format"></el-progress>
          <div class="all">总内存: 1024G</div>
        </div>
        <div class="title">
          初始的总内存
        </div>
        <div class="content">
          <el-progress class="" :percentage="60" :stroke-width="25" :text-inside="true" :format="format"></el-progress>
          <div class="all">总内存: 1024G</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import API from "@/api/agricultural-social/monitoring-center/server-monitoring";
export default {
  data() {
    return {
      
    };
  },
  mounted () {
    this.queryData()
  },
  methods: {
    queryData () {
      API.systemInfo().then(res => {
        if (res.code == 200) {
          
        }
      })
    },
    format(percentage) {
      return `已使用内存${percentage}G`;
    },
  },
};
</script>
  
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  .contain-box {
    border: 1px solid #57717d;
    &.bottom {
      height: calc(100% - 330px);
    }
    .top-title {
      padding: 10px 20px;
      border-bottom: 1px solid #57717d;
    }
  }
  .top-box {
    display: flex;
    width: 100%;
    height: 220px;
    margin-bottom: 30px;
    .chart-view {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }
  .bottom-box {
    width: 100%;
    height: calc(100% - 40px);
    padding: 20px;
    .title {
      padding-bottom: 10px;
    }
    .content {
      position: relative;
      margin-bottom: 15px;
      .all {
        position: absolute;
        right: 10px;
        top: -20px;
      }
    }
  }
}
.mt20 {
  margin-top: 20px;
}
</style>
  